<style rel="stylesheet/scss" lang="scss" scoped>
</style>

<template>
    <div>
        <div class="container">
            <el-card shadow="hover" style="padding:0">

                <el-form ref="searchForm" :inline="true" :model="searchForm" size="medium" label-width="120px">
                    <el-card class="operate_container" shadow="never">
                        <div class="wrapper">
                            <div><i class="el-icon-tickets" style="margin-right: 10px;"></i>数据列表</div>
                            <!-- 操作按钮 -->
                            <div>
                                <el-button type="primary" icon="el-icon-plus" size="medium" circle @click="addOrUpdateVisible"></el-button>
                                <el-button type="danger" icon="el-icon-delete" size="medium" circle @click="handleDelete" :disabled="selectionRows.length <= 0"></el-button>
                                <el-button type="primary" icon="el-icon-refresh" size="medium" circle @click="handleResetSearch('searchForm')"></el-button>
                                <el-button type="primary" icon="el-icon-search" size="medium" circle @click="searchVisible = !searchVisible"></el-button>
                            </div>
                        </div>
                    </el-card>

                    <!-- 组合条件检索 -->
                    <el-card class="filter_container" shadow="never" v-show="searchVisible">
                        <div style="margin-top: 15px">
                            <el-form-item label="分类" prop="cateId">
                                <CategoryCascader v-model="searchForm.cateId" ref="category" styles="width: 100%"></CategoryCascader>
                            </el-form-item>
                            <el-form-item label="品牌" prop="brandId">
                                <BrandSelect v-model="searchForm.brandId" ref="brand" styles="width: 100%"></BrandSelect>
                            </el-form-item>
                           
                            <el-form-item label="检索" prop="keyword">
                                <el-input v-model="searchForm.keyword" clearable @clear="handleResetSearch('searchForm')"></el-input>
                            </el-form-item>

                            <el-form-item label="价格">
                                <el-input-number v-model="searchForm.priceMin" :min="0"></el-input-number>
                                -
                                <el-input-number v-model="searchForm.priceMax" :min="0"></el-input-number>
                            </el-form-item>
                            
                            <el-form-item label=" ">
                                <el-button type="primary" @click="handleSearch()" size="medium">搜索</el-button>
                                <el-button @click="handleResetSearch('searchForm')" size="medium">重置</el-button>
                            </el-form-item>
                        </div>
                    </el-card>
                </el-form>

                <!-- 表格 -->
                <el-table
                    ref="table" size="small" empty-text="暂无数据"
                    element-loading-text="给我一点时间"
                    fit stripe border highlight-current-row
                    v-loading="dataListLoading"
                    :data="dataList"
                    :header-cell-style="{'padding-top': '10px', 'height': '50px', 'color': '#515A6E', 'background-color': '#f8f8f9'}"
                    @selection-change="handleSelection">

                    <el-table-column type="expand">
                        <template slot-scope="scope">
                            商品标题：{{scope.row.skuTitle}} <br />
                            商品副标题：{{scope.row.skuSubtitle}} <br />
                            商品描述：{{scope.row.skuDesc}} <br />
                            分类：{{scope.row.categoryName}} <br />
                            品牌：{{scope.row.brandName}} <br />
                        </template>
                    </el-table-column>
                    
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column type="index" width="55" align="center"></el-table-column>

                    <el-table-column label="名称" prop="skuName" align="center"/>
                    <el-table-column label="默认图片" prop="skuDefaultImg" align="center">
                        <template slot-scope="scope">
                            <el-image style="width:80px;height:80px;" :src="scope.row.skuDefaultImg" :preview-src-list="[scope.row.skuDefaultImg]" fit="fill"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="价格" prop="price" align="center"/>
                    <el-table-column label="销量" prop="saleCount" align="center"/>

                    <el-table-column label="操作" width="260px" align="center" fixed="right">
                        <template slot-scope="scope">
                            <div class="table_action">
                                <el-button type="text" size="small" @click="handlePreviewHandle(scope.row.id)">预览</el-button>
                                <el-button type="text" size="small" @click="handleCommentHandle(scope.row.id)">评论</el-button>

                                <div class="table_action_dropdown">
                                    <el-dropdown @command="handleCommand(scope.row, $event)" style="margin-left: 10px;">
                                        <span class="el-dropdown-link">
                                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                                        </span>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item command="uploadImages">上传图片</el-dropdown-item>
                                            <el-dropdown-item command="seckillSettings">参与秒杀</el-dropdown-item>
                                            <el-dropdown-item command="reductionSettings">满减设置</el-dropdown-item>
                                            <el-dropdown-item command="discountSettings">折扣设置</el-dropdown-item>
                                            <el-dropdown-item command="memberPriceSettings">会员价格</el-dropdown-item>
                                            <el-dropdown-item command="stockSettings">库存管理</el-dropdown-item>
                                            <el-dropdown-item command="couponSettings">优惠劵</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页工具栏 -->
                <div class="pagination">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchForm.page"
                            :page-sizes="[10, 20, 30, 50, 100, 200]"
                            :page-size="searchForm.limit"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalPage">
                    </el-pagination>
                </div>

                <!-- 窗口 -->
                <el-dialog
                    :title="!form.id ? '新增' : '修改'"
                    :visible.sync="visible" :close-on-click-modal="false" @close="handleDialogClose">
                    <el-form ref="form" :model="form" :rules="rules" label-width="120px">

                        <el-form-item label="spuId" prop="spuId">
                            <el-input v-model="form.spuId" placeholder="spuId" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="sku名称" prop="skuName">
                            <el-input v-model="form.skuName" placeholder="sku名称" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="sku介绍描述" prop="skuDesc">
                            <el-input v-model="form.skuDesc" placeholder="sku介绍描述" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="所属分类id" prop="cateId">
                            <el-input v-model="form.cateId" placeholder="所属分类id" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="品牌id" prop="brandId">
                            <el-input v-model="form.brandId" placeholder="品牌id" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="默认图片" prop="skuDefaultImg">
                            <el-input v-model="form.skuDefaultImg" placeholder="默认图片" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="标题" prop="skuTitle">
                            <el-input v-model="form.skuTitle" placeholder="标题" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="副标题" prop="skuSubtitle">
                            <el-input v-model="form.skuSubtitle" placeholder="副标题" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="价格" prop="price">
                            <el-input v-model="form.price" placeholder="价格" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="销量" prop="saleCount">
                            <el-input v-model="form.saleCount" placeholder="销量" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="创建时间" prop="ctime">
                            <el-input v-model="form.ctime" placeholder="创建时间" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="更新时间" prop="utime">
                            <el-input v-model="form.utime" placeholder="更新时间" style="width: 80%;"></el-input>
                        </el-form-item>

                        <!--
                        <el-select style="width: 100%;" v-model="form.sex" placeholder="员工性别">
                            <el-option label="男" :value="1"></el-option>
                            <el-option label="女" :value="2"></el-option>
                        </el-select>
                        <el-form-item label="排序" prop="sort">
                            <el-input-number v-model="form.sort" :min="1" :max="10000" placeholder="排序"></el-input-number>
                        </el-form-item>
                        <el-form-item label="备注" prop="remarks">
                            <el-input type="textarea" :rows="2" placeholder="请输入内容" style="width: 80%;" v-model="form.remarks"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="form.status">
                                <el-radio :label="true" border>正常</el-radio>
                                <el-radio :label="false" border>锁定</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="服务保证" prop="status">
                           <el-radio-group v-model="form.promotionType" size="small">
                                <el-radio-button :label="0">无优惠</el-radio-button>
                                <el-radio-button :label="1">特惠促销</el-radio-button>
                                <el-radio-button :label="2">会员价格</el-radio-button>
                                <el-radio-button :label="3">阶梯价格</el-radio-button>
                                <el-radio-button :label="4">满减价格</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        -->

                    </el-form>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="visible = false">取 消</el-button>
                        <el-button @click="handleSubmit('form')" type="primary" :loading="submitLoading">提 交</el-button>
                    </div>
                </el-dialog>

                <SkuImagesUpdate ref="SkuImages" v-if="visibleSkuImages" @refreshData="getDataList"></SkuImagesUpdate>
            </el-card>
        </div>
    </div>
</template>

<script>
import { save, deleted, updated, info, list, page, selectMyPage, querySkuInfoPage } from "@/api/product/pmsskuinfo"
import CategoryCascader from "@/views/product/components/category-cascader";
import BrandSelect from "@/views/product/components/brand-select";
import SkuImagesUpdate from "./sku_images_update";

export default {
    components: {
        CategoryCascader, BrandSelect, SkuImagesUpdate
    },
    data() {
        return {
            visible: false,
            visibleSkuImages: false,
            searchVisible: false,
            submitLoading: false,

            dataList: [],
            totalPage: 0,
            dataListLoading: true,
            selectionRows: [],

            searchForm: {
                page: 1,
                limit: 10,
                sortColumns: '',
                sortType: '',
                keyword: null,
                priceMin: 0,
                priceMax: 0
            },
            form: {
                id: null,
                spuId: null,
                skuName: null,
                skuDesc: null,
                cateId: null,
                brandId: null,
                skuDefaultImg: null,
                skuTitle: null,
                skuSubtitle: null,
                price: null,
                saleCount: null,
                ctime: null,
                utime: null
            },
            rules: {
            },

            categoryPath: [],
            catePathSub: null,
            brandIdSub: null
        }
    },
    mounted() {
    	this.$nextTick(function () {
            this.catePathSub = PubSub.subscribe("catePathId", (msg, val) => {
                this.searchForm.cateId = val[val.length-1];
            });
            this.brandIdSub = PubSub.subscribe("brandId", (msg, val) => {
                this.searchForm.brandId = val;
            });

            this.getDataList()
    	})
    },
    methods: {
        //处理更多指令
        handleCommand(row, command) {
            console.log("~~~~~", row, command);
            if ("uploadImages" === command) {
                this.handleUpdateSkuImagesVisible(row)
            }
        },

        /**
         * 规格属性维护
         */
		handleUpdateSkuImagesVisible(row) {
            this.visibleSkuImages = true
            this.$nextTick(() => {
                this.$refs.SkuImages.init(row.spuId, row.id);
            });
        },

        /**
         * 预览
         */
        handlePreviewHandle() {

        },

        /**
         * 评论
         */
        handleCommentHandle(skuId) {
            this.$router.push({path: 'comment', query: { skuId }})
        },
        
		/**
         * 打开表单窗口
         */
		addOrUpdateVisible(row) {
            this.visible = true
            if (row.id) {
                this.getInfo(row.id).then(res => {
                    this.form = Object.assign({}, res.data)
                })
            } else {
                this.form.id = null
            }
        },

		/**
         * 删除
         */
        handleDelete(row) { 
            let ids = []
            if (row.id != undefined) {
                ids.push(row.id)
            }
            if(this.selectionRows) {
                this.selectionRows.filter((item, index) => {
                    ids.push(item.id)
                })
            }
            if (ids.length <= 0) {
                this.$notify({ title: '提示', message: '请选择需要删除的记录！', type: 'info' });
            } else {    
                this.$confirm('确定要删除？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
                    deleted(ids).then(res => {
                        if (this.ResultMessage(res)) {
                            this.getDataList()
                        } 
                    }).catch(error => {
                        this.$notify({ title: '错误', message: error, type: 'error' });
                    })
                }).catch(() => {})
            }
        },

		/**
         * 详细信息
         */
        getInfo(id) {
            if (id !== undefined) {
                return info(id).then(res => {
                    if (this.ResultMessage(res, false)) {
                        return res
                    } else {
                        this.$notify({ title: '错误', message: error, type: 'error' });
                    }
                }).catch(error => {
                    this.$notify({ title: '错误', message: error, type: 'error' });
                })
            }
        },
		
        /**
         * 数据列表
         */
        getDataList() {
            querySkuInfoPage(this.searchForm).then(res => {
                if (this.ResultMessage(res, false)) {
                    this.dataList = res.data.records
                    this.totalPage = res.data.total
                    this.dataListLoading = false
                } else {
                    this.dataListLoading = false
                }
            }).catch(error => {
                this.dataListLoading = false
                this.$notify({ title: '错误', message: error, type: 'error' });
            })
        },

        handleSelection(selection) { // 多选
            this.selectionRows = selection
        },
        handleSizeChange(val) { // 每页数量
            this.searchForm.limit = val
            this.getDataList()
        },
        handleCurrentChange(val) { // 页码
            this.searchForm.page = val
            this.getDataList()
        },
        handleResetSearch(name) { // 重置搜索表单
            this.handleReset(name)
            this.searchForm.priceMin = 0
            this.searchForm.priceMax = 0
            this.$refs.brand.brandId = null
            this.$refs.category.paths = []
            this.getDataList()
        },
        handleReset(name) { // 重置表单
            const refs = this.$refs
            refs[name].resetFields()
        },
        handleSearch() { // 单条件搜索
            this.getDataList()
        },
        handleDialogClose() { //表单窗口关闭
            this.handleReset('form')
        }
    },

    /**
     * 生命周期 - 销毁之前
     */
    beforeDestroy() {
        PubSub.unsubscribe(this.catePathSub); 
        PubSub.unsubscribe(this.brandIdSub); 
    }
}
</script>